<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { RouterView } from 'vue-router'
import SideBar from '@/components/SideBar.vue'
import TopBar from '@/components/TopBar.vue'
import { useTeacherStore } from '@/store/teacher'

const teacherStore = useTeacherStore()

onMounted(async () => {
  console.log('开始获取教师信息...')
  const result = await teacherStore.fetchInfo()
  console.log('教师信息获取结果:', result)
  console.log('当前 store 中的教师信息:', teacherStore.teacher)
})

// 监听 teacher 对象的变化
watch(() => teacherStore.teacher, (newValue) => {
  console.log('教师信息已更新:', newValue)
}, { deep: true })
</script>

<template>
  <div class="app-container">
    <div class="top-bar-container">
      <TopBar />
    </div>
    <div class="main-container">
      <div class="side-bar-container">
        <SideBar />
      </div>
      <div class="content-container">
        <div class="content-safe-area-wrapper">
          <RouterView />
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.top-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  flex-shrink: 0;
}

.main-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.side-bar-container {
  display: flex;
  flex-direction: column;
  width: 200px;
  flex-shrink: 0;
}

.content-container {
  flex: 1;
  overflow-y: auto;
  height: 100%;
  scrollbar-width: none;
  min-width: var(--content-min-width);
  position: relative;
}

.content-safe-area-wrapper {
  padding: 35px 50px 35px 50px;
  min-height: 100%;
  box-sizing: border-box;
}
</style>
